<template>
  <div class="search-box">
    <div class="flex">
      <div>
        <el-icon><Search /></el-icon><span>筛选搜索</span>
      </div>
      <div>
        <el-button>重置</el-button>
        <el-button @click="submitFn" type="primary">查询搜索</el-button>
      </div>
    </div>
    <div style="padding-top: 20px">
      <!-- 在input里面回车会造成刷新，大家今晚可以尝试解决一下 -->
      <el-form
        @submit.prevent="submitFn"
        ref="searchFormRef"
        :model="queryParams"
      >
        <el-form-item prop="keyword" label="账号/姓名:" label-width="120px">
          <el-input v-model="queryParams.keyword"></el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <el-table :data="list" border cell-class-name="center">
    <el-table-column class-name="center" prop="id" label="编号" width="80px" />
    <el-table-column class-name="center" prop="name" label="角色名称" />
    <el-table-column class-name="center" prop="description" label="描述" />
    <el-table-column class-name="center" prop="adminCount" label="用户数" />
    <el-table-column class-name="center" prop="createTime" label="添加时间">
      <template #default="scope">
        <span>{{ fomatDate(scope.row.createTime) }}</span>
      </template>
    </el-table-column>
    <el-table-column class-name="center" prop="status" label="是否启用">
      <template #default="scope">
        <el-switch
          v-model="scope.row.status"
          :active-value="1"
          :deactive-value="0"
        ></el-switch>
      </template>
    </el-table-column>
    <el-table-column class-name="center" label="操作">
      <template #default="scope">
        <el-button
          link
          type="primary"
          @click="router.push('/ums/allocResource?id=' + scope.row.id)"
          >分配资源</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <ElConfigProvider :locale="zhCn">
    <el-pagination
      v-model:currentPage="queryParams.pageNum"
      v-model:page-size="queryParams.pageSize"
      background
      layout="total, sizes, prev, pager, next ,jumper"
      :total="total"
      @size-change="pageSizeChagne"
      @current-change="currentChagne"
      :page-sizes="[10, 20, 50, 100]"
    />
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { user } from "@/api";
import { reactive, toRefs } from "vue";
import { fomatDate } from "@/utils";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";

const router = useRouter();

const state = reactive<{
  list: IRoleModel[];
  total: number;
}>({
  list: [],
  total: 0,
});

const queryParams = reactive<IUserListParams>({
  keyword: "",
  pageNum: 1,
  pageSize: 10,
});

const queryRoleList = () => {
  user.queryRoleListApi(queryParams).then((res) => {
    if (res.code === 200) {
      state.list = res.data.list;
      state.total = res.data.total;
    }
  });
};
queryRoleList();

const submitFn = () => {
  queryRoleList();
};

const pageSizeChagne = () => {
  queryRoleList();
};
const currentChagne = () => {
  queryRoleList();
};

const { list, total } = toRefs(state);
</script>
<style lang="less" scoped>
:deep(.center) {
  text-align: center;
}

.search-box {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  .flex {
    display: flex;
    justify-content: space-between;
  }
}
</style>
